<template>
    <div>
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="部门管理" name="first">
                <div style="width: 500px; margin-left: 20px;">
                    <el-input v-model="filterText" placeholder="请输入部门名称进行搜索..." prefix-icon="el-icon-search" />
                    <el-tree ref="tree" :data="deps" :props="defaultp" :filter-node-method="filterNode" :expand-on-click-node="false">
                        <span slot-scope="{ node, data }" class="custom-tree-node" style="display: flex; justify-content: space-between; width: 100%;">
                            <span>{{ node.label }}</span>
                            <span>
                                <el-button class="depBtn" type="primary" size="mini" @click="() => showAddDep(data)">添加部门</el-button>
                                <el-button class="depBtn" type="danger" size="mini" @click="() => deleteDep(data)">删除部门</el-button>
                            </span>
                        </span>
                    </el-tree>
                    <el-dialog title="添加部门" :visible.sync="diaVisible" width="30%">
                        <div>
                            <table>
                                <tr>
                                    <td>
                                        <el-tag>上级部门</el-tag>
                                    </td>
                                    <td>{{ pname }}</td>
                                </tr>
                                <tr>
                                    <td>
                                        <el-tag>部门名称</el-tag>
                                    </td>
                                    <td>
                                        <el-input v-model="dept.deptName" placeholder="请输入部门名称..." />
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="diaVisible = false">取 消</el-button>
                            <el-button type="primary" @click="doAddDept">确 定</el-button>
                        </span>
                    </el-dialog>
                </div>
            </el-tab-pane>
            <el-tab-pane label="职位管理" name="second">
                <div style="margin-left: 10px;">
                    <el-input v-model="pos.postName" class="addPosInput" placeholder="添加职位..." suffix-icon="el-icon-plus" @keydown.enter.native="addPosition" />
                    <el-button size="small" type="primary" icon="el-icon-circle-plus-outline" @click="addPosition">添加</el-button>
                </div>
                <div class="management both" style="margin-left: 20px;">
                    <el-table :data="positions" border stripe style="width: 70%;" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="40" />
                        <el-table-column prop="postId" label="编号" width="70" />
                        <el-table-column prop="postName" label="职位" width="70" />
                        <el-table-column label="操作" align="center" min-width="70">
                            <template slot-scope="scope">
                                <el-button size="mini" type="info" @click="showEditView(scope.$index, scope.row)">更新</el-button>
                                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <el-button size="small" style="margin-top: 8px; margin-left: 15px;" type="danger" :disabled="this.multipleSelection.length===0" @click="deleteMany">批量删除</el-button>
                <el-dialog title="编辑职位" :visible.sync="dialogVisible" width="30%">
                    <div>
                        <el-tag>职位名称</el-tag>
                        <el-input v-model="updatePos.postName" size="small" class="updatePosInput" />
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                        <el-button size="small" type="primary" @click="doUpdate">确 定</el-button>
                    </span>
                </el-dialog>
            </el-tab-pane>
            <!--职称管理-->
            <el-tab-pane label="职称管理" name="third">
                <!-- 添加职称-->
                <div style="margin-left: 20px;">
                    <el-input v-model="jl.name" placeholder="请输入职称名" prefix-icon="el-icon-plus" style="width: 300px;" />
                    <el-button style="margin-left: 10px;" size="small" type="primary" icon="el-icon-plus" @click="addJobLevel">添加</el-button>
                </div>
                <!-- 显示职称-->
                <div style="margin-top: 10px; margin-left: 10px;">
                    <el-table :data="jls" border stripe style="width: 70%; margin: 1% 10px;">
                        <el-table-column prop="id" label="编号" width="55" />
                        <el-table-column prop="name" label="职称名" width="150" />
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="small" @click="showEditView1(scope.$index, scope.row)">更新</el-button>
                                <el-button size="small" type="danger" @click="deleteHandler(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <el-dialog title="编辑职称" :visible.sync="dialogVisible1" width="30%">
                    <div>
                        <el-tag>职称名</el-tag>
                        <el-input v-model="updateJl.name" size="small" class="updatePosInput" />
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button size="small" @click="dialogVisible1 = false">取 消</el-button>
                        <el-button size="small" type="primary" @click="doUpdate1">确 定</el-button>
                    </span>
                </el-dialog>
            </el-tab-pane>
            <el-tab-pane label="权限组" name="fourth">
                <div class="permits">
                    <el-input v-model="sysRole.roleKey" placeholder="请输入角色英文名">
                        <template slot="prepend">ROLE_</template>
                    </el-input>
                    <el-input v-model="sysRole.roleName" placeholder="请输入角色中文名" @keydown.enter.native="doAddRole" />
                    <el-button size="small" type="primary" icon="el-icon-plus" @click="doAddRole">添加角色</el-button>
                </div>
                <div class="ManaMain">
                    <el-collapse v-model="activeNameCope" accordion @change="change">
                        <el-collapse-item v-for="(r, index) in roles" :key="index" :title="r.roleName" :name="r.roleId">
                            <el-card class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>可访问资源</span>
                                    <el-button style="float: right; padding: 3px 0; color: red;" type="text" icon="el-icon-delete" @click="doDeleteRole(r)" />
                                </div>
                                <div>
                                    <el-tree :key="index" show-checkbox :data="allMenus" :props="defaultProps" :default-checked-keys="selectedMenus" node-key="menuId" />
                                    <div style="display: flex; justify-content: flex-end;">
                                        <el-button size="mini" @click="cancelUpdate">取消修改</el-button>
                                        <el-button size="mini" type="primary" @click="confirmUpdate(r.roleId, index)">确认修改</el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import {Message} from 'element-ui'

export default {
    data() {
        return {
            filterText: '',
            deps: [],
            defaultp: {
                children: 'childrenDept',
                label: 'deptName'
            },
            diaVisible: false,
            dept: {
                deptName: '',
                deptParentId: -1
            },
            pname: '',
            // 以上是部门管理
            selectedMenus: [],
            roles: [],
            allMenus: [],
            defaultProps: {
                children: 'childrenMenu',
                label: 'menuName'
            },
            sysRole: {
                roleKey: '',
                roleName: ''
            },
            activeName: 'first',
            activeNameCope: -1,
            multipleSelection: [],
            jl: {
                name: ''
            },
            titleLevels: [
                '正高级',
                '副高级',
                '中级',
                '初级'
            ],
            jls: [],
            pos: {
                postName: ''
            },
            positions: [],
            updatePos: {
                postName: ''
            },
            updateJl: {
                name: ''
            },
            dialogVisible: false,
            dialogVisible1: false,
            selectionDataList: []
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val)
        }
    },
    mounted() {
        this.initPositions()
        this.initJls()
        this.initRoles()
        this.initDeps()
        // setTimeout(() => {
        //     console.log(this.$refs.tree)
        //     this.$refs.tree.filter('测试')
        // }, 500)
    },
    methods: {
        initDept() {
            this.dept = {
                deptName: '',
                deptParentId: -1
            }
            this.pname = ''
        },
        addDept2Deps(deps, dept) {
            for (let i = 0; i < deps.length;i++) {
                let d = deps[i]
                if (d.deptId === dept.deptParentId) {
                    d.childrenDept = d.childrenDept.concat(dept)
                    if (d.childrenDept.length > 0) {
                        d.isParent = true
                    }
                    return
                } else {
                    this.addDept2Deps(d.childrenDept, dept)
                }
            }
        },
        doAddDept() {
            this.postRequest('/system/cfg/dept/add', this.dept).then(resp => {
                if (resp) {
                    this.diaVisible = false
                    this.addDept2Deps(this.deps, resp.obj)
                    this.initDeps()
                    this.$message.success('添加成功')
                }
            })
        },
        showAddDep(data) {
            this.diaVisible = true
            this.pname = data.deptName
            this.dept.deptParentId = data.deptId
        },
        removeDepFromDeps(p, deps, id) {
            for (let i = 0; i < deps.length; i++) {
                let d = deps[i]
                if (d.deptId === id) {
                    deps.splice(i, 1)
                    if (deps.length === 0) {
                        p.isparent = false
                    }
                    return
                } else {
                    this.removeDepFromDeps(d, d.childrenDept, id)
                }
            }
            this.initDeps()
        },
        deleteDep(data) {
            if (data.isParent) {
                this.$message.error('父部门删除失败！')
            } else {
                this.$confirm('此操作将永久删除该[' + data.deptName + ']部门, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteDeptRequest('/system/cfg/dept/delete/' + data.deptId).then(resp => {
                        if (resp) {
                            this.removeDepFromDeps(null, this.deps, data.deptId)
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            }
        },
        filterNode(value, data) { // 绑定部门管理搜索
            console.log(data)
            if (!value) return true // true是展示，false是不展示
            return data.deptName.indexOf(value) !== -1
        },
        initDeps() {
            this.getRequest('/system/cfg/dept/info').then(resp => {
                if (resp) {
                    this.deps = resp.data
                }
            })
        },
        // 以上是部门管理
        doDeleteRole(role) {
            this.$confirm('此操作将永久删除[' + role.roleName + ']角色,是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest('/system/cfg/permiss/delete/', role.roleId).then(resp => {
                    if (resp) {
                        this.initRoles()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        doAddRole() {
            if (this.sysRole.roleName && this.sysRole.roleKey) {
                this.postRequest('/system/cfg/permiss/add', this.sysRole).then(resp => {
                    if (resp) {
                        this.initRoles()
                        this.sysRole.roleName = ''
                        this.sysRole.roleKey = ''
                    }
                })
            } else {
                this.$message.error('所有字段不能为空！')
            }
        },
        cancelUpdate() {
            this.activeNameCope = -1
        },
        confirmUpdate(rid, index) {
            let tree = this.$refs.tree[index]
            let selectedKeys = tree.getCheckedKeys(true)
            let url = '/system/cfg/permiss/updateRoleMenu?rid=' + rid
            selectedKeys.forEach(key => {
                url += '&mIds=' + key
            })
            this.putRequest(url).then(resp => {
                if (resp) {
                    this.activeNameCope = -1
                }
            })
        },
        initSelectedMenus(rid) {
            this.getRequest('/system/cfg/permiss/mid/' + rid).then(resp => {
                if (resp) {
                    this.selectedMenus = resp.data
                }
            })
        },
        change(rid) {
            if (rid) {
                this.initAllMenus()
                this.initSelectedMenus(rid)
            }
        },
        initAllMenus() {
            this.getRequest('/system/cfg/permiss/listMenus').then(resp => {
                if (resp) {
                    this.allMenus = resp.data
                }
            })
        },
        initRoles() {
            this.getRequest('/system/cfg/permiss/info').then(resp => {
                if (resp) {
                    this.roles = resp.data
                }
            })
        },
        initJls() {
            this.getRequest('/system/cfg/joblevel/jobLevelInfo').then(resp => {
                if (resp) {
                    this.jls = resp.data
                }
            })
        },
        deleteMany() {
            this.$confirm('此操作将永久删除[' + this.multipleSelection.length + ']条职位,是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let ids = '?'
                this.multipleSelection.forEach(item => {
                    ids += 'ids=' + item.postId + '&'
                })
                this.deleteRequest('/system/cfg/pos/deleteBatch' + ids).then(resp => {
                    if (resp) {
                        this.initPositions()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        doUpdate() { // 职位确认更新
            this.putRequest('/system/cfg/pos/update', this.updatePos).then(resp => {
                if (resp) {
                    this.initPositions()
                    this.dialogVisible = false
                }
            })
        },
        doUpdate1() { // 职称确认更新
            this.putRequest('/system/cfg/joblevel/update', this.updateJl).then(resp => {
                if (resp) {
                    this.initJls()
                    this.dialogVisible1 = false
                }
            })
        },
        addJobLevel() {
            if (this.jl.name) {
                this.postRequest('/system/cfg/joblevel/add', this.jl).then(resp => {
                    if (resp) {
                        this.initJls()
                        this.jl.name = ''
                    }
                })
            } else {
                this.$message.error('字段不能为空！')
            }
        },
        addPosition() {
            if (this.pos.postName) {
                this.postRequest('/system/cfg/pos/add', this.pos).then(resp => {
                    if (resp) {
                        this.initPositions()
                        this.pos.postName = ''
                    }
                })
            } else {
                this.$message.error('职位名称不能为空！')
            }
        },
        showEditView(index, data) { // 职位管理更新
            Object.assign(this.updatePos, data)
            this.dialogVisible = true
        },
        showEditView1(index, data) { // 职称管理更新
            Object.assign(this.updateJl, data)
            this.dialogVisible1 = true
        },
        handleDelete(index, data) {
            this.$confirm('此操作将永久删除[' + data.postName + ']职位,是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest('/system/cfg/pos/delete/', data.postId).then(resp => {
                    if (resp) {
                        this.initPositions()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        deleteHandler(data) {
            this.$confirm('此操作将永久删除[' + data.name + ']职称,是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest('/system/cfg/joblevel/delete', data.id).then(resp => {
                    if (resp) {
                        this.initJls()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        initPositions() {
            this.getRequest('/system/cfg/pos/info').then(resp => {
                if (resp) {
                    this.positions = resp.data
                    this.$forceUpdate()
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.addPosInput {
    width: 300px;
    margin-right: 8px;
    padding-left: 10px;
}
.both {
    margin-top: 10px;
}
.updatePosInput {
    width: 200px;
    margin-left: 8px;
}
.permits {
    display: flex;
    justify-content: flex-start;
    margin-left: 10px;
}
.permits .el-input {
    width: 300px;
    margin-right: 6px;
}
.ManaMain {
    margin-top: 10px;
    width: 700px;
    margin-left: 10px;
}
.depBtn {
    padding: 2px;
}
</style>
